<template>
    <!-- 显示信息 -->
        <div class="body_one">
            <!-- 左边为网址名 -->
            <div class="body_one_1">
                <span>Finger 博客</span>
            </div>
            <!-- 右边头像和用户名 -->
            <div class="body_one_2">
                <el-dropdown class="dropdown">
                    <el-button class="button">
                        <!-- 头像 -->
                        <el-avatar
                            class="toxiang"
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        <!-- 用户名 -->
                        <span>{{name}}</span>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu class="dropdown_item">
                            <el-dropdown-item @click="TuiChu">退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
</template>
<script>
import { onMounted, onUnmounted, ref } from 'vue'
import {ElMessage,ElLoading} from 'element-plus'
import {useRouter} from 'vue-router'
// 引入封装好的点击 进入或者退出的时候 有个缓冲
import {ElLoad} from '@/Element-api/ElLoading.js'
export default {
    setup(){
        let name = ref('')
        // 路由
        const router = useRouter()
        name = window.localStorage.getItem('token')
        onMounted(()=>{
            setTimeout(()=>{
                ElMessage({
                    message:'欢迎'+name+'用户',
                    type:'success',
                    duration:800
                })
            })
        })
        // 退出系统
        const TuiChu = ()=>{
            // const loading = ElLoading.service({
            //     lock: true,
            //     text:'正在退出',
            //     background: 'rgba(0, 0, 0, 0.7)',
            // })
            const loading = ElLoad('正在退出')
            setTimeout(()=>{
                loading.close()
                router.push('/')
            },1000)
            window.localStorage.removeItem('token')
        }

        return{
            name,
            TuiChu
        }
    }
}
</script>
<style lang="less" scoped>
    .body_one{
            width: 100%;
            height: 80px;   
            line-height: 80px;
            position: relative;
            border-bottom: 1px solid #ccc;
            .body_one_1{
                width: 200px;
                height: 100%;
                text-align: center;
                position: absolute;
                left: 100px;
                span{
                    color: rgb(121, 121, 121);
                    font-size: 25px;
                    cursor: pointer;
                }
            }
            .body_one_2{
                width: 300px;
                height: 100%;
                position: absolute;
                right: 50px;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                .button{
                    width: 150px;
                    height: 50px;
                    position: relative;
                }
                .toxiang{
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    left: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                }
                span{
                    font-size: 20px;
                    position: absolute;
                    right: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
</style>
